<!DOCTYPE html>
<html lang="{{ page.lang | default: site.lang | default: "en" }}">

  {%- include head.html -%}

  <body
    x-data="{navOpen: false}"
    x-init="$refs.body.style.setProperty('--scrollbar-width', `${window.innerWidth - document.body.offsetWidth}px`)"
    x-ref="body"
  >
    {%- include aside.html -%}
    <div class="site-main">
      {%- include header.html -%}
      <main class="site-clamp site-content has-toc" aria-label="Content">
        <aside class="table-of-contents flex flex-col">
          {% include toc.html html=content %}
        </aside>
        <div class="content">
          {{ content }}
          {%- include pagination.html -%}
        </div>
      </main>
      {%- include footer.html -%}
    </div>
  </body>

</html>
